<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Markdown编辑器</title>
</head>
<!-- layui样式 -->

<link rel="stylesheet" href="/components/editor/css/editormd.css">
<script src="/base/js/app.js"></script>
<script src='/base/js/jquery-3.4.1.min.js'></script>
<script type="text/javascript" src="/components/editor/editormd.js"></script>
<link rel="stylesheet" href="/components/layuiadmin/layui/src/css/layui.css" media="all">
<script src="/components/layuiadmin/layui/src/layui.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!-- 图片粘贴复制拖拽，Markdown编辑器元素  textarea id必须为 L_content，并且该引入必须在 textarea的下方，否则无法读取到 L_content 参数 -->
<!--<script src="/components/editor/imgCopyPull2.js"></script>-->
<style>

    .result {
        margin-left: 5%;
        margin-top: 1%;
        width: 89%;
        height: 250px;
        border: 1px solid #e5e8ff;
        box-shadow: 0 0 10px #ffffff;
        padding-left: 1%;
        padding-top: 10px;
    }
</style>
<body>
<div id="app">
    <div id="L_content"></div>
    <div>
        <!-- 运行按钮 -->
        <span style=" margin-left: 5%;" class="layui-btn layui-btn-normal layui-btn-sm" onclick="run()" data-type="reload">运行程序</span>
        <!-- <span id="state" style=" margin-left: 2%;">输出结果：</span>-->
        <!-- 输出 -->
        <div id="result" class="result">
        </div>
    </div>
</div>
<script>


</script>
<script>

    var javaCodeRun = path + "/admin/xj/tool/javaCodeRun";


    layui.use(['form'], function () {

    });

    //注意1：这里的就是上面的DIV的id属性值
    var myEditor = editormd("L_content", {
        width: "90%",
        height: 450,
        syncScrolling: "single",
        path: "/components/editor/lib/", // 资源路径
        // 自定义的增强配置！
        saveHTMLToTextarea: false,        // 保存 HTML 到 Textarea
        emoji: false,                    // 开启表情的功能！ 图片的本地配置！
        // theme: "light",               // 工具栏主题
        // previewTheme: "dark",         // 预览主题
        // editorTheme: "pastel-on-dark",// 编辑主题
        // markdown的配置！
        watch: false,                // 默认关闭预览窗口
        tex: true,                   // 开启科学公式TeX语言支持，默认关闭
        flowChart: true,             // 开启流程图支持，默认关闭
        sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
        imageUpload: false,          // 图片本地上传,禁用，使用imgCopyPull2.js 的上传方式
        /*指定需要显示的功能按钮*/
        toolbarIcons: function () {
            return [
                "undo", "redo", "|",
                "releaseIcon",
            ]
        },
    });


    function run() {
        let ii = layui.layer.load();
        $("#result").html("正在执行中.....");
        // 为了load正常执行,延时50毫秒执行程序
        setTimeout(function () {
            let javaCodeMd = myEditor.getMarkdown();
            let javaCode = javaCodeMd.replaceAll("```", "").replace("java", "");
            let res = Ajax.post(javaCodeRun, {javaCode: javaCode});
            $("#result").html(res.data);
            layui.layer.close(ii);
            // layer.msg("执行成功");
        }, 50);
    }


    /**
     * 默认值
     * @type {{javaCode: string, content: string}}
     */
    var defaultData = {
        content: "等待运行",
        javaCode: "```java\n" +
            "\n" +
            "public class HelloWorld {\n" +
            "    public static void main(String []args) {\n" +
            "       log.debug(\"Hello World!\");\n" +
            "    }\n" +
            "}\n" +
            "\n" +
            "```",
    };
    // 设置默认数据
    $('#L_content textarea').val(defaultData.javaCode);
    $('#result').html(content);
</script>
</body>
</html>
